<template>
    <div id="container">
        <el-menu
                :default-active="menuActiveIndex"
                class="el-menu"
                mode="horizontal"
                @select="menuSelect"
                background-color="white"
                text-color="black"
                active-text-color="black">
            <el-menu-item index="0" style="padding-left: 60px;padding-right: 40px">
                <img src="../assets/index_logo.png" alt="home_logo" width="96" height="24" @click="backIndex">
            </el-menu-item>
            <el-menu-item index="1" class="menu_item">
                课堂
            </el-menu-item>
            <el-menu-item index="2" class="menu_item">
                备课区
            </el-menu-item>
            <el-menu-item index="3" class="menu_item">
                精品慕课
            </el-menu-item>
            <el-menu-item index="4" class="menu_item">
                我的精品
            </el-menu-item>
            <el-menu-item index="5" class="menu_item">
                双选会
            </el-menu-item>
            <el-menu-item index="6" class="menu_item">
                论文管理
            </el-menu-item>
            <el-menu-item class="center_entry">
                <div class="center_head" @click="center_menu_open=true">

                </div>
            </el-menu-item>

        </el-menu>

        <div class="center_menu" v-if="center_menu_open">
            <div @click="handle_menu('1')">
                VIP剩余20天
            </div>
            <div @click="handle_menu('2')">
                机构账号绑定
            </div>
            <div @click="handle_menu('3')">
                个人设置
            </div>
            <div @click="handle_menu('4')">
                邀请记录
            </div>
            <div @click="handle_menu('5')">
                退出账户
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                // 当前选中的menu组件
                menuActiveIndex: "1",
                center_menu_open: false
            }
        },

        methods: {
            // 点击menu组件时调用
            menuSelect:function (key, keyPath) {
                console.log(key, keyPath)
            },

            handle_menu:function (index) {
                this.center_menu_open = false
                if (index === "3"){
                    window.location.href = "/Setting"
                }
                if (index === "5"){
                    this.$router.push({ path: "/" });
                    this.$message.success("退出登录");
                    //退出登录清除缓存
                    localStorage.clear();
                    sessionStorage.clear();
                    //退出登录后禁用浏览器返回
                    history.pushState(null, null, document.URL);
                    window.addEventListener('popstate', function () {
                        history.pushState(null, null, document.URL);
                    });
                }
            },
            backIndex:function () {
                window.location.href = "./index"
            }
        },

        mounted() {
            document.addEventListener('click',e=>{
                if(!this.$el.contains(e.target)){
                    this.center_menu_open = false
                }
            })

        }
    }
</script>

<style scoped lang="scss">
    #container{
        display: flex;
        flex-direction: column;
        .el-menu{
            .el-menu-item{
                height: 72px;
                font-size: 16px;
                &:hover{
                    background: white !important;
                }
                &.is-active{
                    background: white !important;
                }
            }
        }
    }

    .el-menu{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .el-menu:hover{
        background-color: rgb(39,46,56);
        color: rgb(39,46,56);
    }

    .menu_item{
        padding: 5px 15px !important;
        margin: 0 10px !important;
        color: #5F6368 !important;
    }

    #login_button{
        display: inline-block;
        width: 76px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        color: #FFF;
        font-size: 16px;

        margin-right: 20px;
        border: 1px solid;

        text-decoration: none;
        outline: none;

        &:hover{
            color: #4D90FE;
        }
    }

    #sign_up_button{
        display: inline-block;
        width: 76px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        color: #FFF;
        font-size: 16px;
        background: #357ae8;

        &:hover{
            background: #4D90FE;
        }
    }

    .center_entry{
        margin-left: 500px !important;

        .center_head{
            margin-top: 10px;
            height: 50px;
            width: 50px;

            border-radius: 50px !important;

            background-size: 100% 100%;
            background-image: url("../assets/head_portrait/1.png");
            background-repeat: no-repeat;

        }
    }

    .center_menu{
        left: 1250px;
        top: 65px;

        position: absolute;
        display: flex;
        flex-direction: column;

        height: 216px;
        width: 160px;

        padding-top: 8px;
        padding-bottom: 8px;

        div{
            width: 160px;
            height: 40px;
            line-height: 40px;

            font-size: 14px;
            text-align: left;
            padding-left: 50px;

            background-color: white;
            color: rgb(45, 45, 45);

            &:hover{
                cursor: pointer;
                color: rgb(77,144,254);
                background-color: #F2F2F2;
            }
        }
    }
</style>
